<template>
    <div class="page-container">
        <el-form :inline="true" :model="search" size="small" ref="searchForm">
            <el-form-item label="名称:">
                <el-input placeholder="请输入名称" v-model="search.name" @change="filterSubmit" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="filterSubmit">查询</el-button>
                <el-button @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row>
            <el-button size="small" type="primary" @click="add">添加会员等级</el-button>
        </el-row>
        <div class="table-list">
            <el-table :data="list" size="small">
                <!-- <el-table-column label="ID" prop="id"></el-table-column> -->
                <el-table-column label="等级名称" prop="name"></el-table-column>
                <el-table-column label="等级图标" prop="icon">
                    <template #default="scope">
                        <el-image style="width: 30px; height: 30px" :src="scope.row.icon" fit="cover"
                            :preview-src-list="[scope.row.icon]" :preview-teleported="true">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon><ele-Picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="等级背景" prop="wall">
                    <template #default="scope">
                        <el-image style="width: 30px; height: 30px" :src="scope.row.wall" fit="cover"
                            :preview-src-list="[scope.row.wall]" :preview-teleported="true">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon><ele-Picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="享受折扣" prop="discount">
                    <template #default="scope">
                        <span>{{scope.row.discount}}%</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="等级说明" prop="note"></el-table-column>
                <el-table-column label="发布时间" prop="createTime"></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" link size="small" @click="editRow(scope.row)">修改</el-button>
                        <el-button type="primary" link size="small" @click="delRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-block">
            <el-pagination v-model:currentPage="current" v-model:page-size="page" :page-sizes="[10, 20, 30, 40]"
                :small="true" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
                :total="total" :hide-on-single-page="true" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <member-level-detail v-model:dialogDrawer="dialogFormVisible" :defaultForm="form" :title="title"
            @onDetailSubmit="onDetailSubmit"></member-level-detail>
    </div>
</template>
  
<script>
import { reactive, toRefs, onMounted } from 'vue'
import MemberLevelDetail from '../components/MemberLevelDetail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { pageList, get, remove } from '/@/api/ums/level'
import api from '/@/api/commonApi'
export default {
    name: 'Paper',
    components: {
        MemberLevelDetail
    },
    setup() {
        const state = reactive({
            list: [],
            search: {
                current: 1,
                size: 10
            },
            title: '新增',
            form: {},
            dialogFormVisible: false,
            total: 100,
            current: 1,
            page: 10,
            statusOptions: [
                {
                    value: '0',
                    label: '未发布',
                },
                {
                    value: '1',
                    label: '已发布',
                },
            ]
        })
        const add = () => {
            restForm()
            state.title = '新增会员等级'
            state.dialogFormVisible = true
        }
        const editRow = row => {
            state.title = '编辑会员等级'
            get(row.id).then(res => {
                state.form = res.data
                let icon = []
                if (state.form.icon != null) {
                    icon.push({
                        name: 'images',
                        url: res.data.icon
                    })
                }
                state.form.image = icon
                let wall = []
                if (state.form.wall != null) {
                    wall.push({
                        name: 'images',
                        url: res.data.wall
                    })
                }
                state.form.backageImage = wall
            })

           
            state.dialogFormVisible = true
        }
        const restForm = () => {
            state.form = {
                id: null,
                commentGrowthPoint: 40,
                defaultStatus: 1,
                discount: 0,
                freeFreightPoint: 0,
                growthPoint: 0,
                icon: null,
                wall: null,
                image:[],
                backageImage:[],
                merchantsId: "0",
                name: null,
                note: null,
                priviledgeBirthday: 0,
                priviledgeFreeFreight: 0,
                priviledgeMemberPrice: 0
            }
        }
        const delRow = row => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.name + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                remove(row.id).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getList()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败：' + res.message,
                        })
                    }
                })

            }).catch()
        }
        const getList = () => {
            api.workLevel(state.search).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        const handleSizeChange = () => {
            getList()
        }
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
        const onDetailSubmit = () => {
            getList()
            state.dialogFormVisible = false
        }
        const changeStatus = (row) => {
            /* updateStatus({ id: row.id, status: row.status }).then(res => {
                if (res.code == 0) {
                    ElMessage.success('修改成功')
                    getList()
                } else {
                    ElMessage.error('修改失败:' + res.message)
                }
            }) */
        }
        const filterSubmit = () => {
            state.search.current = 1
            getList()
        }
        const reset = () => {
            state.search = {
                current: 1,
                size: 10,
                name: ''
            }
            getList()
        }
        onMounted(() => {
            getList()
        })
        return {
            add,
            editRow,
            delRow,
            handleSizeChange,
            handleCurrentChange,
            onDetailSubmit,
            restForm,
            changeStatus,
            filterSubmit,
            reset,
            ...toRefs(state)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.page-container {
    .table-list {
        background: var(--next-color-white);
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }
    }
}
</style>